<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '加仓',
  },
}
</route>
<template>
  <PageLayout :navbarShow="false" navTitle="加减仓">
    <scroll-view scroll-y class="wrap">
      <!--导航栏-->
      <view class="navbar">
        <wd-navbar
          title="加减仓"
          :bordered="false"
          custom-style="background-color: transparent !important;"
        ></wd-navbar>
      </view>
      <view
        style="
          width: 95%;
          margin: 0 auto;
          background-color: #fff;
          border-radius: 20rpx;
          padding: 20rpx;
        "
      >
        <view>基本信息</view>
        <view style="font-size: 22rpx; margin-top: 20rpx; color: #8a8a8a">展示基金的基本信息</view>
        <view
          style="
            margin-bottom: 20rpx;
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;
            padding-bottom: 20rpx;
            border-bottom: 1px solid #f2f2f2;
            font-size: 26rpx;
          "
        >
          <view>基金名称</view>
          <view>{{ infoForm.name }}</view>
        </view>

        <view
          style="
            margin-bottom: 20rpx;
            display: flex;
            justify-content: space-between;
            padding-bottom: 20rpx;
            border-bottom: 1px solid #f2f2f2;
            font-size: 26rpx;
          "
        >
          <view>基金代码</view>
          <view>{{ infoForm.code }}</view>
        </view>

        <view
          style="
            margin-bottom: 20rpx;
            display: flex;
            justify-content: space-between;
            padding-bottom: 20rpx;
            border-bottom: 1px solid #f2f2f2;
            font-size: 26rpx;
          "
        >
          <view>基金类型</view>
          <view>{{ infoForm.type }}</view>
        </view>
      </view>

      <view
        style="
          width: 95%;
          margin: 40rpx auto;
          background-color: #fff;
          border-radius: 20rpx;
          padding: 20rpx;
        "
      >
        <view>模拟操作</view>
        <view style="font-size: 22rpx; margin-top: 20rpx; color: #8a8a8a">
          仅模拟数据操作，注意操作风险，避免投资损失！
        </view>
        <view style="padding: 20rpx">
          <view style="margin-bottom: 20rpx">操作类型：</view>
          <view style="display: flex">
            <view
              v-for="(i, index) in typeList"
              :key="index"
              style="
                padding: 10rpx 30rpx;
                background-color: #e9f0ff;
                margin-right: 20rpx;
                border-radius: 10rpx;
                font-size: 24rpx;
              "
              :style="{ color: i.key == param.tradeType ? '#0083ff' : '' }"
              @click="param.tradeType = i.key"
            >
              {{ i.name }}
            </view>
          </view>
        </view>

        <view style="padding: 20rpx">
          <view style="margin-bottom: 20rpx">操作金额/份额:</view>
          <view>
            <view v-if="param.tradeType == 1" style="display: flex; align-items: center">
              <wd-input
                type="number"
                v-model="param.tradeNum"
                :disabled="infoForm.hold_num == undefined || infoForm.hold_num == 0"
                :placeholder="
                  '可用份额' + (infoForm.hold_num == undefined ? 0 : infoForm.hold_num) + '份'
                "
                clearable
                style="width: 95%"
              />
              <view style="line-height: 34px; font-size: 24rpx">份</view>
            </view>
            <view v-if="param.tradeType == 0" style="display: flex; align-items: center">
              <view style="line-height: 34px; font-size: 24rpx">￥</view>
              <wd-input
                type="number"
                v-model="param.tradeMoney"
                placeholder=" 请输入交易金额"
                style="width: 100%"
                clearable
              />
            </view>
          </view>
          <!--份额快捷键-->
          <view style="display: flex; margin-top: 10rpx" v-if="param.tradeType == 1">
            <view
              v-for="(item, index) in numTypeList"
              :key="index"
              style="
                margin-right: 20rpx;
                padding: 10rpx 20rpx;
                border: 1px solid #f2f2f2;
                border-radius: 10rpx;
                font-size: 22rpx;
              "
              @click="
                param.tradeNum = (
                  (infoForm.hold_num == undefined ? 0 : infoForm.hold_num) * item.key
                ).toFixed(2)
              "
            >
              {{ item.name }}
            </view>
          </view>

          <!--金额快捷键-->
          <view style="display: flex; margin-top: 10rpx" v-if="param.tradeType == 0">
            <view
              v-for="(item, index) in moneyList"
              :key="index"
              style="
                margin-right: 20rpx;
                padding: 10rpx 20rpx;
                border: 1px solid #f2f2f2;
                border-radius: 10rpx;
                font-size: 22rpx;
              "
              @click="param.tradeMoney = item.key"
            >
              {{ item.name }}
            </view>
          </view>
        </view>

        <view
          style="padding: 20rpx; display: flex; justify-content: space-between; align-items: center"
        >
          <view>操作费率:</view>
          <view>0%</view>
        </view>
        <view
          style="
            background-color: #f2f2f2;
            padding: 10rpx 20rpx;
            color: #8a8a8a;
            font-size: 22rpx;
            border-radius: 10rpx;
          "
        >
          <view>
            预估操作手续费
            <text style="color: red">0</text>
            元，操作费率：
            <text style="color: red">0%</text>
          </view>
        </view>

        <view
          style="padding: 20rpx; display: flex; justify-content: space-between; align-items: center"
        >
          <view>买/卖日期:</view>
          <wd-datetime-picker v-model="param.tradeDate" type="date">
            <view>2025-08-07</view>
          </wd-datetime-picker>
        </view>

        <view
          style="
            padding: 0rpx 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view>具体时间：</view>
          <view style="display: flex">
            <view
              style="
                margin-right: 10rpx;
                padding: 10rpx 20rpx;
                background-color: #e9f0ff;
                border-radius: 10rpx;
                font-size: 24rpx;
              "
              :style="{ color: param.tradeDateType == 0 ? '#0083ff' : '' }"
              @click="param.tradeDateType = 0"
            >
              15点前
            </view>
            <view
              style="
                padding: 10rpx 20rpx;
                background-color: #e9f0ff;
                border-radius: 10rpx;
                font-size: 24rpx;
              "
              :style="{ color: param.tradeDateType == 1 ? '#3379fb' : '' }"
              @click="param.tradeDateType = 1"
            >
              15点后
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!--底部工具条-->
    <view
      style="
        display: flex;
        padding: 20rpx;
        background-color: #fff;
        justify-content: space-between;
        align-items: center;
      "
    >
      <view style="font-size: 22rpx">
        预估金额：
        <text style="color: red">999</text>
        元
        <text style="font-size: 16rpx; color: #8a8a8a">
          (手续费
          <!--计算手续费-->
          <!--买入手续费=买入金额 * 费率 -->
          <text v-if="param.tradeType == 0">
            {{ (param.tradeMoney * param.tradeRate * 0.01).toFixed(2) }}
          </text>
          <!--卖出费率=净值*份额*费率-->
          <text v-if="param.tradeType == 1">
            {{ (param.tradeEstimateVal * param.tradeNum * param.tradeRate * 0.01).toFixed(2) }}
          </text>
          元)
        </text>
      </view>
      <view
        style="
          font-size: 24rpx;
          background-color: #3379fb;
          color: #fff;
          width: 40%;
          border-radius: 36rpx;
          text-align: center;
          padding: 20rpx;
        "
        @click="onClickSubmit"
      >
        立即提交
      </view>
    </view>

    <!--弹窗-->
    <wd-popup v-model="showPop" position="bottom" custom-style="border-radius: 20rpx 20rpx 0px 0px">
      <view style="text-align: center; padding: 30rpx">
        <view style="font-weight: 600; margin-bottom: 40rpx">（模拟操作）是否确认操作信息？</view>
        <view style="margin-bottom: 40rpx; font-size: 24rpx">
          该操作仅为模拟操作，请注意同步实际操作！
        </view>
        <view
          style="display: flex; align-items: center; justify-content: center; margin-top: 20rpx"
        >
          <view
            style="
              width: 40%;
              padding: 20rpx;
              background-color: #f2f2f2;
              border-radius: 20rpx;
              margin-right: 20rpx;
            "
            @click="showPop = false"
          >
            取消
          </view>
          <view
            style="
              width: 40%;
              padding: 20rpx;
              background-color: #3379fb;
              border-radius: 20rpx;
              color: #fff;
            "
            @click="onClickCorfim"
          >
            确认提交
          </view>
        </view>
      </view>
    </wd-popup>
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { http } from '@/utils/http'
import moment from 'moment'
import { useToast } from 'wot-design-uni'

defineOptions({
  name: 'addChoose',
  options: {
    styleIsolation: 'shared',
  },
})
// 类型
const typeList = ref([
  { key: 0, name: '加仓' },
  { key: 1, name: '减仓' },
])
// 份额类型
const numTypeList = ref([
  { key: 1 / 5, name: '1/5' },
  { key: 1 / 4, name: '1/4' },
  { key: 1 / 3, name: '1/3' },
  { key: 1 / 2, name: '1/2' },
  { key: 1, name: '全仓' },
])
// 金额类型
const moneyList = ref([
  { key: 100, name: '100' },
  { key: 200, name: '200' },
  { key: 500, name: '500' },
  { key: 1000, name: '1000' },
  { key: 5000, name: '5000' },
  { key: 10000, name: '10000' },
])
// 基础信息
const infoForm = ref<any>({})
// 参数
const param = ref<any>({
  tradeDate: Date.now(),
  tradeDateType: 0,
  tradeNum: null,
  tradeRate: 0,
  tradeType: 0,
  tradeMoney: null,
  tradeEstimateVal: 0,
})
// 显示弹窗
const showPop = ref(false)
// 消息提示
const toast = useToast()
// 持有ID
const holdId = ref('')
// 获取详情
const loadDetail = () => {
  http.get('/sys/fund/hold/detailAll', { id: holdId.value }).then((res: any) => {
    if (res.success) {
      infoForm.value = res.result
    }
  })
}
// 确认提交
const onClickCorfim = () => {
  // 设置主键
  param.value.holdId = holdId.value
  // 设置代码
  param.value.code = infoForm.value.code
  // 发起请求
  http.post('/sys/fund/trade/create', param.value).then((res: any) => {
    if (res.success) {
      // 隐藏弹窗
      showPop.value = false
      // 提示
      toast.success('操作成功')
      // 返回上一级
      setTimeout(() => {
        uni.navigateBack()
      }, 2500)
    }
  })
}
// 点击立即提交
const onClickSubmit = () => {
  if (Number(param.value.tradeType) === 0) {
    // 金额需大于0
    if (param.value.tradeMoney === null || param.value.tradeMoney <= 0) {
      toast.error('请输入有效加仓金额')
      return false
    }
  } else if (Number(param.value.tradeType) === 1) {
    // 份额需大于0
    if (param.value.tradeNum <= 0) {
      toast.error('请输入有效减仓份额')
      return false
    }
  } else {
    return false
  }
  // 显示确认弹窗
  showPop.value = true
}

onLoad((option) => {
  holdId.value = option.holdId
  param.value.tradeType = option.type
  loadDetail()
})
</script>

<style lang="scss" scoped>
.wrap {
  background-image: url(../../static/hold/buy-bg.png);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding-bottom: 40rpx;
  :deep(.wd-picker__value) {
    margin-right: 0px;
  }
  :deep(.wd-picker__cell) {
    padding-right: 0px;
  }
  :deep(.wd-picker__arrow) {
    display: none;
  }
}
</style>
